<template>
  <div class="grade-statistics-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>成绩统计</span>
          <el-select v-model="currentExam" placeholder="选择考试">
            <el-option
              v-for="exam in examList"
              :key="exam.id"
              :label="exam.name"
              :value="exam.id"
            />
          </el-select>
        </div>
      </template>

      <!-- 统计图表 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <div ref="scoreDistributionChart" style="height: 400px"></div>
        </el-col>
        <el-col :span="12">
          <div ref="averageScoreChart" style="height: 400px"></div>
        </el-col>
      </el-row>

      <!-- 统计数据 -->
      <el-row :gutter="20" class="statistics-info">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">参考人数</div>
            </template>
            <div class="statistics-value">{{ statistics.totalStudents }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">平均分</div>
            </template>
            <div class="statistics-value">{{ statistics.averageScore }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">最高分</div>
            </template>
            <div class="statistics-value">{{ statistics.highestScore }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">最低分</div>
            </template>
            <div class="statistics-value">{{ statistics.lowestScore }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 成绩列表 -->
      <div class="grade-list">
        <el-table :data="gradeList" style="width: 100%">
          <el-table-column prop="studentId" label="学号" width="120" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="score" label="得分" width="100" />
          <el-table-column prop="submitTime" label="提交时间" width="180" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleViewDetail(scope.row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 成绩详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="成绩详情"
      width="60%"
    >
      <div v-if="currentGradeDetail">
        <div class="student-info">
          <p><strong>学号：</strong>{{ currentGradeDetail.studentId }}</p>
          <p><strong>姓名：</strong>{{ currentGradeDetail.name }}</p>
          <p><strong>总分：</strong>{{ currentGradeDetail.score }}</p>
        </div>

        <div
          v-for="(question, index) in currentGradeDetail.questions"
          :key="question.id"
          class="question-detail"
        >
          <div class="question-header">
            <span>第{{ index + 1 }}题（{{ question.score }}分）</span>
            <span :class="['score', question.gotScore === 0 ? 'wrong' : '']">
              得分：{{ question.gotScore }}
            </span>
          </div>
          <div class="question-content">
            <p><strong>题目：</strong>{{ question.title }}</p>
            <p><strong>学生答案：</strong>{{ question.studentAnswer }}</p>
            <p><strong>正确答案：</strong>{{ question.correctAnswer }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'

const router = useRouter()

// 考试列表
const examList = ref([
  { id: 1, name: 'C语言期中考试' },
  { id: 2, name: 'C语言章节测试-指针' }
])
const currentExam = ref('')

// 统计数据
const statistics = reactive({
  totalStudents: 120,
  averageScore: 85.5,
  highestScore: 98,
  lowestScore: 60
})

// 成绩列表
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const gradeList = ref([
  {
    id: 1,
    studentId: '2024001',
    name: '张三',
    score: 90,
    submitTime: '2024-04-01 15:30:00'
  },
  {
    id: 2,
    studentId: '2024002',
    name: '李四',
    score: 85,
    submitTime: '2024-04-01 15:25:00'
  }
])

// 成绩详情
const detailDialogVisible = ref(false)
const currentGradeDetail = ref(null)

const handleViewDetail = (grade) => {
  currentGradeDetail.value = {
    ...grade,
    questions: [
      {
        id: 1,
        title: '以下哪个不是C语言的基本数据类型？',
        score: 2,
        gotScore: 2,
        studentAnswer: 'string',
        correctAnswer: 'string'
      },
      {
        id: 2,
        title: '关于指针的说法，以下正确的是：',
        score: 4,
        gotScore: 4,
        studentAnswer: '指针变量存储的是内存地址',
        correctAnswer: '指针变量存储的是内存地址'
      }
    ]
  }
  detailDialogVisible.value = true
}

// 图表相关
let scoreDistributionChart = null
let averageScoreChart = null

onMounted(() => {
  // 初始化成绩分布图表
  scoreDistributionChart = echarts.init(document.querySelector('#scoreDistributionChart'))
  scoreDistributionChart.setOption({
    title: {
      text: '成绩分布'
    },
    tooltip: {},
    xAxis: {
      data: ['60分以下', '60-70分', '70-80分', '80-90分', '90-100分']
    },
    yAxis: {},
    series: [{
      name: '人数',
      type: 'bar',
      data: [5, 15, 40, 45, 15]
    }]
  })

  // 初始化平均分趋势图表
  averageScoreChart = echarts.init(document.querySelector('#averageScoreChart'))
  averageScoreChart.setOption({
    title: {
      text: '平均分趋势'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['第1次', '第2次', '第3次', '第4次', '第5次']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [82, 85, 83, 86, 85.5],
      type: 'line'
    }]
  })
})

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.grade-statistics-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistics-info {
  margin: 20px 0;
}

.statistics-header {
  text-align: center;
  font-size: 16px;
}

.statistics-value {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.grade-list {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.student-info {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.question-detail {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.score {
  color: #67c23a;
}

.score.wrong {
  color: #f56c6c;
}

.question-content {
  font-size: 14px;
}

.question-content p {
  margin: 5px 0;
}
</style> 